<script setup lang="ts">
import { ContentWrapNoHeaderLine } from '@/components/ContentWrap'
import { Table } from '@/components/Table'
import { ElMessage } from 'element-plus'
import { reactive, ref, watch } from 'vue'
import { useTable } from "@/hooks/web/useTable";
import { DataData } from "@/api/manage/data/types";
import { getDataListApi, delDataApi } from "@/api/manage/data/index";
import { Pagination, TableColumn } from "@/types/table";
//秘文端管理

const stateOptions = [
  { label: "运行中", value: 1101 },
  { label: "已停止", value: 1102 },
  { label: "已禁用", value: 1103 },
  { label: "未授权", value: 1104 },
  { label: "空间不足", value: 1105 },
  { label: "未知", value: 1106 }
];
const columns = reactive<TableColumn[]>([
  {
    field: 'state',
    label: '状态',
    visible: true,
    className: ''
  }, {
    field: 'service_id',
    label: '秘文端ID',
    search: true,
    visible: true,
    className: ''
  }, {
    field: 'service_name',
    label: '秘文端名称',
    search: true,
    visible: true,
    className: ''
  }, {
    field: 'inner_ip',
    label: '内网IP',
    search: true,
    visible: true,
    className: ''
  }, {
    field: 'inner_port',
    label: '内网端口',
    search: true,
    visible: true,
    className: ''
  }, {
    field: 'outer_ip',
    label: '外网IP',
    search: true,
    visible: true,
    className: ''
  }, {
    field: 'outer_port',
    label: '外网端口',
    search: true,
    visible: true,
    className: ''
  }, {
    field: 'storage',
    label: '存储空间',
    search: true,
    visible: true,
    className: ''
  }
])

const { register, tableObject, methods } = useTable<DataData>({
  getListApi: getDataListApi,
  delListApi: delDataApi,
  response: {
    list: 'list',
    total: 'total'
  }
})
const paginationObj = ref<Pagination>()
watch(() => tableObject.total,
  (val) => {
    if (val > 0) {
      paginationObj.value = {
        total: tableObject.total
      }
    } else {
      paginationObj.value = undefined
    }
  })
const { getList } = methods
getList()


const selectedCount = ref(0)
const multipleSelection = ref<DataData[]>([])
const handleSelectionChange = (val: DataData[]) => {
  multipleSelection.value = val
  selectedCount.value = val?.length || 0
}


const selectedRows = async () => {
  const { getSelections } = methods
  const selections = await getSelections()
  return selections;
}

defineExpose({
  getSelected: selectedRows
})

</script>

<template>
  <ContentWrapNoHeaderLine title="">
    <div class="rounded bg-gray-100 w-full flex justify-between px-1.5 py-2 mb-3.5">
      <div>已批量选择<span class="mx-1 text-[var(--el-color-primary)]">{{ selectedCount }}</span>条事项</div>
    </div>
    <div class="">
      <Table 
      border v-model:pageSize="tableObject.page_size" v-model:currentPage="tableObject.page_index"
        :columns="columns" :data="tableObject.tableList" :loading="tableObject.loading" :pagination="paginationObj"
        @register="register" @select="handleSelectionChange" @select-all="handleSelectionChange">
        <template #state="{ row }">
          <template v-for="o in stateOptions">
            <template v-if="o.value === row.state">
              {{ o.label }}
            </template>
          </template>
        </template>
      </Table>
    </div>
  </ContentWrapNoHeaderLine>
</template>